import React, { Component } from 'react';
import Top from '../../components/Top';
import BookClassTags from '../../components/BookClassTags';
import BookClassList from '../../components/BookClassList';
import axios from 'axios';
import './index.css'
class BookClass extends Component {
    state = {
        initData:[],
        id:'',
        page:1,
        moneyId:'',
        isfinishId:'',
        name:'',
        tags:[],
        list:[],
        money:[
            { id:'', txt:'全部'},
            { id:1, txt:'限免'},
            { id:2, txt:'包月'},
            { id:3, txt:'付费'}
        ],
        isfinish:[
            { id:'', txt:'全部'},
            { id:1, txt:'完结'},
            { id:0, txt:'连载'},
            { id:2, txt:'最新'},

        ],
       
    }
    render() {
       const { title ,tags,list,id,page,moneyId,money,isfinishId,isfinish} = this.state
        return (
            <div className="book-box">
                <div className="book-calss-top">
                    <Top name={title}/>
                    <BookClassTags tags={tags} idx={id} 
                        getBookClassAllData={this.getBookClassAllData}
                        page={page} moneyId={moneyId} 
                        money={money}  isfinishId={isfinishId} isfinish={isfinish}
                    />
                </div>
                <div className="book-calss-bottom" onScroll={this.scroll}>
                    <BookClassList list={list}/>
                </div>
            </div>
        );
    }

    componentDidMount(){
      
        this.setState({id:this.props.location.state.id},()=>{
            const { id,page,isfinishId ,moneyId} = this.state
            this.getBookClassAllData(id,page,moneyId,isfinishId)
        })
       
       
    }

    getBookClassAllData = (id,page,moneyId,isfinishId) =>{
        axios({
            method:'GET',   
            url:`https://wxapi.chuangbie.com/wap/book/bookclass.html?id=${id}&page=${page}&money=${moneyId}&isfinish=${isfinishId}`
        }).then(res =>{
           
            this.setState({
                id:id,
                moneyId:moneyId,
                isfinishId:isfinishId,
                title:res.data.data.title,
                tags:res.data.data.tags,
                list:res.data.data.list,
            })
        })
    }
    
    scroll = this.Throttle((event) =>{ 
        
        if(event.target.scrollTop > 600){
            const { page } = this.state
            this.setState({
                page:page+1
            },() =>{
                let  { id,page,isfinishId ,moneyId,list} = this.state
                axios({
                    method:'GET',
                    url:`https://wxapi.chuangbie.com/wap/book/bookclass.html?id=${id}&page=${page}&money=${moneyId}&isfinish=${isfinishId}`
                }).then(res =>{
                    
                    let  newList =res.data.data.list 
                    newList =  newList.filter(item =>{
                            return item.book_id
                        })
                    list = [...list,...newList]
                    this.setState({list})
                })
            })
            
        } 
     },1200)

    Throttle(fun,delay) {
         let flag = false
         return (event) => {
            if (flag) {
                return
            }
            flag = true
            setTimeout(() => {
                fun(event)
                flag = false
            }, delay)
        }
        
    }

    
}

export default BookClass;